<template>
  <TimePicker
    class="custom-timePicker"
    confirm
    :value="value"
    :type="type"
    :format="format"
    :placeholder="placeholder"
    @on-change="timeChange"></TimePicker>
</template>

<script>
export default {
  props: {
    value: {},
    type: {
      type: String,
      default: 'time'
    },
    format: {
      type: String,
      default: 'HH:mm:ss'
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    clearable: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    timeChange (val) {
      this.$emit('input', val)
      this.$emit('on-change', val)
    }
  }
}
</script>

<style lang="scss">
  @import '~common/scss/color';

  .custom-timePicker {
    width: 100%;
    .ivu-input {
      border-radius: 4px;
      color: $Color-text;
    }
  }
</style>
